<template>
  <div class="layout-header">
    <div class="layout-header-left">
      <!-- 菜单收起 / 展开 -->
      <menu-collapse />
      <!-- 刷新 -->
      <reload-page></reload-page>
      <!-- 面包屑 -->
      <div class="layout-header-trigger"></div>
    </div>

    <div class="layout-header-right">
      <!-- 全屏   -->
      <full-screen></full-screen>
      <!-- 系统消息 -->
      <system-message></system-message>
      <!-- 头像 -->
      <user-avatar />
    </div>
  </div>
</template>

<script lang="ts" setup>
import UserAvatar from "@/layouts/Header/UserAvatar.vue";
import SystemMessage from "@/layouts/Header/SystemMessage.vue";
import FullScreen from "@/layouts/Header/FullScreen.vue";
import MenuCollapse from "@/layouts/Header/MenuCollapse.vue";
import ReloadPage from "@/layouts/Header/ReloadPage.vue";

interface HeaderProp {
  inverted: boolean;
}

withDefaults(defineProps<HeaderProp>(), {
  inverted: false,
});
</script>

<style lang="less" scoped>
.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: 60px;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: 11;

  &-left {
    display: flex;
    align-items: center;
  }

  &-right {
    display: flex;
    align-items: center;
    margin-right: 20px;
    height: 100%;
  }
}

.avatar {
  display: flex;
  align-items: center;
  height: 64px;
}

.n-breadcrumb {
  height: 16px;
  position: absolute;
  top: 16px;
  margin-left: 10px;
  display: inline-block;
}
.n-breadcrumb-item {
  font-size: 20px;
  line-height: 26px;
}

.link-text {
}
</style>
